<template>
  <el-dialog
    class="nodeExportDialog"
    title="导出"
    v-model="dialogVisible"
    :width="isMobile ? '90%' : '50%'"
    :top="isMobile ? '20px' : '15vh'"
  >
    <div class="exportContainer">
      <div class="nameInputBox">
        <span class="name">导出文件名称</span>
        <el-input style="max-width: 300px" v-model="fileName" @keydown.stop />
        <el-checkbox v-show="['smm', 'json'].includes(exportType)" v-model="widthConfig" style="margin-left: 12px"
          >是否包含主题、结构等配置数据</el-checkbox
        >
      </div>
      <div class="paddingInputBox" v-show="['svg', 'png', 'pdf'].includes(exportType)">
        <div class="paddingInputGroup">
          <span class="name">{{ $t("export.paddingX") }}</span>
          <el-input style="max-width: 100px" v-model="paddingX" @change="onPaddingChange" @keydown.stop />
        </div>
        <div class="paddingInputGroup">
          <span class="name">{{ $t("export.paddingY") }}</span>
          <el-input style="width: 100px" v-model="paddingY" @change="onPaddingChange" @keydown.stop />
        </div>
        <div class="paddingInputGroup">
          <el-checkbox v-show="['png', 'pdf'].includes(exportType)" v-model="isTransparent">{{
            $t("export.isTransparent")
          }}</el-checkbox>
        </div>
      </div>
      <div class="downloadTypeList">
        <div
          class="downloadTypeItem"
          v-for="item in downTypeList"
          :key="item.type"
          :class="{ active: exportType === item.type }"
          @click="exportType = item.type"
        >
          <div :class="['icon iconfont-chaojizhiku', item.icon, item.type]" />
          <div class="info">
            <div class="name">{{ item.name }}</div>
            <div class="desc">{{ item.desc }}</div>
          </div>
        </div>
      </div>
      <div class="tip">{{ $t("export.tips") }}</div>
    </div>
    <template v-slot:footer>
      <el-button @click="cancel">{{ $t("dialog.cancel") }}</el-button>
      <el-button type="primary" @click="confirm">{{ $t("dialog.confirm") }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { downTypeList } from "../../../config"
import { isMobile } from "simple-mind-map/src/utils/index"

export default {
  name: "Export",
  data() {
    return {
      dialogVisible: false,
      exportType: "smm",
      fileName: "思维导图",
      widthConfig: true,
      isTransparent: false,
      loading: false,
      loadingText: "",
      paddingX: 10,
      paddingY: 10,
      isMobile: isMobile()
    }
  },
  computed: {
    downTypeList() {
      return downTypeList.zh
    }
  },
  created() {
    this.$bus.$on("showExport", this.handleShowExport)
  },
  beforeUnmount() {
    this.$bus.$off("showExport", this.handleShowExport)
  },
  methods: {
    handleShowExport() {
      // console.log(MindMapUtil.instance.mindMap?.getData(false))
      this.dialogVisible = true
    },

    onPaddingChange() {
      this.$bus.$emit("paddingChange", {
        exportPaddingX: Number(this.paddingX),
        exportPaddingY: Number(this.paddingY)
      })
    },

    cancel() {
      this.dialogVisible = false
    },

    confirm() {
      if (this.exportType === "svg") {
        this.$bus.export(
          this.exportType,
          this.fileName,
          true,
          `* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
          }`
        )
      } else if (["smm", "json"].includes(this.exportType)) {
        this.$bus.export(this.exportType, this.fileName, this.widthConfig)
      } else if (this.exportType === "png") {
        this.$bus.export(this.exportType, this.fileName, this.isTransparent)
      } else if (this.exportType === "pdf") {
        this.$bus.export(this.exportType, this.fileName, this.isTransparent)
      } else {
        this.$bus.export(this.exportType, this.fileName)
      }
      // this.$notify.info({
      //   title: this.$t("export.notifyTitle"),
      //   message: this.$t("export.notifyMessage")
      // })
      this.cancel()
    }
  }
}
</script>

<style lang="less" scoped>
.exportContainer {
  &.isDark {
    .downloadTypeList {
      .downloadTypeItem {
        background-color: #363b3f;

        .info {
          .name {
            color: hsla(0, 0%, 100%, 0.9);
          }
        }
      }
    }
  }
}

.nodeExportDialog {
  /deep/ .el-dialog__body {
    background-color: #f2f4f7;
  }

  .nameInputBox {
    margin-bottom: 20px;

    .name {
      margin-right: 10px;
    }
  }

  .paddingInputBox {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .paddingInputGroup {
      margin-right: 12px;
      margin-bottom: 12px;

      &:last-of-type {
        margin-right: 0;
      }
    }

    .name {
      margin-right: 10px;
    }
  }

  .tip {
    margin-top: 10px;

    &.warning {
      color: #f56c6c;
    }
  }

  .downloadTypeList {
    display: flex;
    flex-wrap: wrap;
    .downloadTypeItem {
      width: 200px;
      height: 88px;
      padding: 22px;
      overflow: hidden;
      margin: 10px;
      border-radius: 11px;
      box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.02);
      background-color: #fff;
      display: flex;
      align-items: center;
      cursor: pointer;
      border: 2px solid transparent;

      &.active {
        border-color: #409eff;
      }

      .icon {
        font-size: 30px;
        margin-right: 10px;
        flex-shrink: 0;

        &.png {
          color: #ffc038;
        }

        &.pdf {
          color: #ff6c4d;
        }

        &.md {
          color: #2b2b2b;
        }

        &.json {
          color: #12c87e;
        }

        &.svg {
          color: #4380ff;
        }

        &.smm {
          color: #409eff;
        }
      }

      .info {
        width: 100%;
        overflow: hidden;

        .name {
          color: #1a1a1a;
          font-size: 15px;
          margin-bottom: 5px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .desc {
          color: #999;
          font-size: 12px;
          display: -webkit-box; /* 必须设置display属性为-webkit-box */
          overflow: hidden; /* 超出部分隐藏 */
          text-overflow: ellipsis; /* 显示省略号 */
          -webkit-line-clamp: 2; /* 限制显示两行 */
          -webkit-box-orient: vertical; /* 垂直方向上的换行 */
        }
      }
    }
  }
}
</style>
